<template>
	<view class="container container01">
		<view class="set_num">
			<view class="nums">购买数量<text>可用余额 : 480 ADC</text></view>
			<view class="type" @click="open_buy_num_box()">
			 	<image :src="cimg"></image>
			 	<view>ADC</view>
			 	<text :class="{active:num_active}">{{nums}}</text>
			</view>
		</view>
		<view class="set_num">
			<view class="nums">待付金额<text>1 ADC = {{l_num}} {{c_name}}</text></view>
			<view class="type type01">
				<image :src="c_img" @click="open_buy_type()"></image>
				<view @click="open_buy_type()">{{c_name}}</view>
				<text :class="{active:num_active}">{{c_toal}}</text>
			</view>
		</view>
		<button class="submit set_submit" @click="open_again()" :class="{submit_green:submit_Active}">创建交易</button>
		
		<!--弹窗start-->
		<u-popup mode="bottom" :show="buy_num_box" :closeOnClickOverlay="true" @close="buy_num_popup_close">
			<view class="sell_num_box">
				<view class="tit">ADC交易数量<image src="/static/images/img_31.png" mode="widthFix" @click="buy_num_popup_close"></image></view>
				<view class="remind_tips">创建交易时的数量为50的倍数，其它数量可使用 "互转" 功能来进行交易。</view>
				<view class="true_name_num">
					<view v-for="(item,index) in arr" :key="index" :class="{active:num_count == index}" @click="num_change(index,item)">{{item.num}}</view>
					<view class="no">950</view>
					<view class="no">1000</view>
				</view><!--class="no" 不可点击-->
			</view>
		</u-popup>
		
		<u-popup  mode="bottom" :show="tel_show" :closeOnClickOverlay="true" @close="choose_popup_close">
			<view class="choose">
				<view class="tit">交易币种<image src="/static/images/img_31.png" mode="widthFix"  @tap="choose_popup_close"></image></view>
				<view class="list">
					<view v-for="(item,index) in items" :key="index" :class="{active:count == index}" @click="change(index,item)">
						<image :src="item.url"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal :show="againg" :confirmText="confirmText" showCancelButton :cancelText="cancelText" confirmColor="#00A2E9" cancelColor="#757475" @confirm="confirm" @cancel="cancel">
			<view class="box_content">
				<image src="/static/images/img_10.png" mode="widthFix" class="b_img"></image>
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
		</u-modal>
		
		<u-popup :show="gj_box" mode="bottom" :closeOnClickOverlay="true" @close="gj_popup_close" customStyle="background: none">
			<view class="true_name-box">
				<image src="/static/images/img_31.png" @tap="gj_popup_close()"></image>
				<view class="tit">正在购买<text>150 ADC</text></view>
				<view class="con">需支付：<text>1030.50 CNY</text></view>
				<view class="forgot">
					<view>输入交易密码<text @tap="goto('/pages/my/set_transaction_pwd')">忘记密码 ？</text></view>
					<u-code-input v-model="cusname" dot :maxlength="6" space="0" size="85rpx" fontSize="40rpx" :focus="true" color="#332C2B" @finish="finish" class="codeInput"></u-code-input>
					<u-safe-bottom></u-safe-bottom>
				</view>
				<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show"></u-keyboard>
			</view>
		</u-popup>
		
		<u-popup mode="bottom" :show="success_box" :closeOnClickOverlay="true" @close="succees_popup_close" customStyle="background: none" >
			<view class="success_box">
				<text class="close" @tap="succees_popup_close"></text>
				<image src="/static/images/img_11.png"></image>
				<view class="con">创建成功<text>等待卖家响应</text></view>
				<view class="btn">
					<button class="submit on" @tap="succees_popup_close">查看订单</button>
					<u-safe-bottom customStyle="background: #FAFAFA"></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<!--弹窗end-->
	</view>
</template>

<script>
export default{
	data(){
		return{
			navIndex: 0,
			border:false,
			items: [
				{
					url:'/static/images/img_03.png',
					name:"CNY",
					tel:"+86",
					l_num:"6.83"
				},
				{
					url:'/static/images/img_04.png',
					name:"USD",
					tel:"+1",
					l_num:"0.92"
				},
				{
					url:'/static/images/img_05.png',
					name:"INR",
					tel:"+91",
					l_num:"7.83"
				}
			],
			count: "",
			cimg:"/static/images/g_img27.png",
			nums:"00",
			c_img:"/static/images/img_03.png",
			c_name:"CNY",
			buy_num_box:false,
			arr:[{num:50},{num:100},{num:150},{num:200},{num:250},{num:300},{num:350},{num:400},{num:450},{num:500},{num:550},{num:600},{num:650},{num:700},{num:750},{num:800},{num:850},{num:900}],
			tel_show:false,
			againg:false,
			num_count:"",
			c_toal:"0.00",
			l_num:"6.83",
			submit_Active:false,
			num_active: false,
			content:'当前币种尚未在您的国家和地区开通<br/>服务！',
			confirmText:"重新选择",
			cancelText:"关闭",
			gj_box:false,
			success_box: false,
			keyboard_show: true,
			tooltip:false,
			cusname:"",
		}
	},
	methods:{
		open_buy_num_box(){
			this.buy_num_box = true
		},
		buy_num_popup_close(){
			this.buy_num_box = false
		},
		open_buy_type(){
			this.tel_show=true
		},
		choose_popup_close(){
			this.tel_show = false
		},
		open_again(){
			this.gj_box=true
		},
		confirm(){
			this.againg = false,
			this.tel_show=true
		},
		cancel(){
			this.againg = false
		},
		change(e,item) {
			this.count = e,
			this.tel_show = false,
			this.c_name = item.name,
			this.c_img = item.url,
			this.c_tel = item.tel,
			this.l_num = item.l_num,
			this.c_toal = this.l_num * this.nums
		},
		num_change(e,item){
			this.num_count= e,
			this.nums = item.num,
			this.buy_num_box = false,
			this.c_toal = this.l_num * this.nums,
			this.submit_Active = true,
			this.num_active= true
		},
		gj_popup_close(){
			this.gj_box= false
		},
		valChange(val) {
			this.cusname += val;
			if(this.cusname.length>=6){
				this.gj_box =false,
				this.success_box = true
			}
		},
		backspace(){
			if(this.cusname.length) this.cusname = this.cusname.substr(0, this.cusname.length - 1);
		},
		finish(e){
			this.gj_box =false,
			this.success_box = true
		},
		succees_popup_close(){
			this.success_box = false
		}
	}
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("create.scss");
</style>